<template>
  <div>
    <TableList
      ref="TableList"
      :model-value="searchFormData"
      request-url="system/product/list"
      request-method="get"
      :table-data="tableData"
      :table-column="tableColumn"
    >
      <!-- 搜索去内容 -->
      <template #search>
        <el-form-item label="产品名称：" prop="product">
          <el-input v-model="searchFormData.product" autocomplete="off" placeholder="请输入产品" size="small" clearable />
        </el-form-item>
        <el-form-item label="产品分类：" prop="category">
          <el-select v-model="searchFormData.category" filterable placeholder="请选择" clearable size="small">
            <el-option
              v-for="item in classifyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="省份：" prop="province">
          <el-select v-model="searchFormData.province" filterable placeholder="请选择" size="small" clearable>
            <el-option
              v-for="item in province"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /></el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="city">
          <el-select v-model="searchFormData.city" filterable placeholder="请选择" size="small" clearable>
            <el-option
              v-for="item in city"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>
      <!-- 按钮区 -->
      <template #btns>
        <el-button size="small" type="primary" @click="drawer=true">新增产品</el-button>
      </template>

      <!-- 自定义status 列 -->
      <template #status="{ item, row }">
        <div>{{ ['删除', '启用', '禁用'][row[item]] }}</div>
      </template>
      <!-- 图片 -->
      <template #productImges="{ item, row }">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="row[item]"
            :preview-src-list="[row[item]]"
          />
        </div>
      </template>

      <template #productPoster="{ item, row }">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="row[item]"
            :preview-src-list="[row[item]]"
          />
        </div>
      </template>

      <!-- 自定义operate 列 -->
      <template #operate="{ item, row }">
        <el-button type="text" size="small" @click="handleUpdate(row)">编辑</el-button>
      </template>

    </TableList>
    <Form
      :drawer="drawer"
      :default-value="detailValue"
      :classify-list="classifyList"
      @add-success="addSuccess"
      @close:drawer="drawer=false"
    />

  </div>
</template>

<script>
import TableList from '@/components/TableList'
// import MyForm from '@/components/Test'
import Form from './form'
import { myMixin } from './data.js'
import { area } from '@/utils/area'
import request from '@/utils/request'

export default {
  components: {
    TableList,
    Form
  },
  mixins: [myMixin],
  data() {
    return {
      drawer: false,
      searchFormData: {},
      detailValue: {},
      province: (() => area.map(item => ({ value: item.ad_name, label: item.ad_name })))(),
      city: (() => {
        return area.reduce((pre, cur) => {
          const children = cur.children.map(item => ({ value: item.name, label: item.name }))
          pre = pre.concat(children)
          return pre
        }, [])
      })(),

      tableData: [],
      classifyList: []
    }
  },
  created() {
    this.getClassifyList()
  },
  methods: {
    addSuccess() {
      this.drawer = false
      this.$refs.TableList?.requestData()
    },
    async handleUpdate(row) {
      this.drawer = true
      const data = await request({ url: 'system/product/' + row.id, method: 'get' })
      if (data.code === 200) {
        this.detailValue = data.data
      }
    },
    getClassifyList() {
      request({ url: 'system/category/list', method: 'get', params: { pageSize: 1000 }}).then(res => {
        if (res.code === 200) {
          this.classifyList = res.rows.map(item => ({ value: item.category, label: item.category }))
        }
      })
    }
  }

}
</script>
